<template>
<div>
<!--  搜索框-->
  <div>
    <el-input @keyup.enter.native="search" style="width: 130px;margin-right: 5px"  placeholder="请输入姓名" v-model="name"   suffix-icon="el-icon-search"></el-input>
    <el-input @keyup.enter.native="search" style="width: 200px;margin:1px 5px"   placeholder="请输入身份证号" v-model="identity" suffix-icon="el-icon-collection"></el-input>
    <el-input @keyup.enter.native="search" style="width: 200px;margin:1px 5px"  placeholder="请输入证书编号" v-model="certificateNum" suffix-icon="el-icon-notebook-1"></el-input>
<!--    <el-input @keyup.enter.native="search" style="width: 200px;margin:10px 5px"-->
<!--              placeholder="请输选择证书状态" v-model="state" suffix-icon="el-icon-finished"></el-input>-->
    <el-select clearable v-model="state" placeholder="请选择证书状态" style="width: 150px;margin:1px 5px">
      <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
      </el-option>
    </el-select>

      <el-date-picker
          style="margin:1px 5px;"
          v-model="certificateTime"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="证书颁发开始日期"
          end-placeholder="证书颁发结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
          :picker-options="pickerOptions">
      </el-date-picker>

    <el-button class="ml-5" type="primary" @click="search">搜索</el-button>
    <el-button @click="reset">重置</el-button>
  </div>

<!--  操作按钮-->
  <div style="margin:4px 0">
    <el-button v-show="false" type="primary" @click="handleAdd">新增
      <i class="el-icon-circle-plus-outline" />
    </el-button>
    <el-popconfirm  title="确定批量删除吗？" @confirm="delBatch">
      <el-button type="danger" slot="reference">批量删除
        <i class="el-icon-remove-outline" />
      </el-button>
    </el-popconfirm>
  </div>
<!--  数据表格-->
  <el-table v-loading.fullscreen.lock="loading" :data="tableData" border stripe :header-cell-style="tableHeaderColor"
            @selection-change="handleSelectionChange">
<!--    多选框-->
    <el-table-column
        type="selection"
        width="45">
    </el-table-column>

    <el-table-column prop="id" label="ID" width="44" ></el-table-column>
    <el-table-column prop="name" label="姓名" ></el-table-column>
    <el-table-column prop="sex" label="性别" width="55" ></el-table-column>
    <el-table-column prop="identity" label="身份证号" width="150" ></el-table-column>
    <el-table-column prop="issuedBy" label="证书发布机构" width="120"></el-table-column>
    <el-table-column prop="certificateName" label="证书名称"></el-table-column>
    <el-table-column prop="certificateNum" label="证书编号"></el-table-column>
    <el-table-column prop="certificateLevel" label="证书级别"></el-table-column>
    <el-table-column prop="certificateTime" :formatter="dateFormat" label="颁发时间" width="88px"></el-table-column>
    <el-table-column  label="附件">
      <template slot-scope="scope">
        <el-button type="primary" v-if="scope.row.attachment" @click="download(scope.row.attachment)">下载</el-button>
      </template>
    </el-table-column>


    <el-table-column prop="state" label="证书状态" width="85">
      <template slot-scope="scope">
        <span v-if="scope.row.state==='pass'">审核通过</span>
        <span v-if="scope.row.state==='checking'">审核中</span>
        <span v-if="scope.row.state==='nopass'">审核不通过</span>
      </template>
    </el-table-column>
    <el-table-column prop="createTime" :formatter="dateFormat" label="创建时间" width="88px"></el-table-column>
    <el-table-column label="操作" width="200" align="center">
      <template slot-scope="scope">
        <el-button type="warning" @click="handleEdit(scope.row)">审核 <i class="el-icon-edit"></i></el-button>
        <el-popconfirm  title="确定删除吗？" @confirm="del(scope.row.id)"
                        class="ml-5">
          <el-button type="danger" slot="reference">删除 <i class="el-icon-remove-outline"></i></el-button>
        </el-popconfirm>

      </template>
    </el-table-column>
  </el-table>
  <!-- 分页插件 -->
  <div style="padding:10px 0">
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[2, 5, 8, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
    </el-pagination>
  </div>

  <!-- 新增或修改对话框  -->
  <el-dialog title="证书信息" :visible.sync="dialogFormVisible" width="30%" top="20px" >
    <el-form label-width="100px" size="mini">
      <el-form-item label="用户ID" >
        <el-input v-model="form.userId" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="姓名" >
        <el-input v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="性别" >
        <el-input v-model="form.sex" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="身份证号" >
        <el-input v-model="form.identity" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="证书发布机构" >
        <el-input v-model="form.issuedBy" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="证书名称" >
        <el-input v-model="form.certificateName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="证书编号" >
        <el-input v-model="form.certificateNum" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="证书级别" >
        <el-input v-model="form.certificateLevel" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="颁发时间" >
        <el-date-picker
            v-model="form.certificateTime"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="证书状态" >
        <el-input :value="cstate(form.state)" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="附件" >
        <el-input v-model="form.attachment" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="创建时间" >
        <el-date-picker
            v-model="form.createTime"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width: 50px;padding: 9px 0" @click="save(form.state)">保存</el-button>
        <el-button type="success" @click="save('pass')">审核通过</el-button>
        <el-button type="danger" @click="save('nopass')">审核不通过</el-button>
        <el-button @click="cancel">取 消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>


</div>

</template>

<script>
import * as fecha from "element-ui/lib/utils/date"

export default {
  name: "certificates",
  data(){
    return{
      loading:false,
      //搜索框部分
      name:"",
      identity:"",
      certificateNum:"",
      state:"",
      certificateTime:[],//证书时间范围
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },//时间范围选择
      options: [{
        value: 'pass',
        label: '审核通过'
      }, {
        value: 'checking',
        label: '审核中'
      },{
        value: 'nopass',
        label: '审核不通过'
      }],


      //  表格部分
      tableData: [], //内容为[{k1:v1,k2:v2 ...},{},{}]
        //分页变量
      total:0,
      pageNum:1,
      pageSize:8,
      //新增或编辑时使用的模型
      form:{},
      dialogFormVisible:false,//对话框是否显示
        //多选框的数据
      multipleSelection:[],

    }
  },
  created() {
    this.load()
  },
  methods:{
    //搜索框部分
    search(){
      console.log(this.certificateTime)
      this.request.get("/certificates/page",{
        params:{
          pageNum:1,
          pageSize:this.pageSize,

          name:this.name,
          identity:this.identity,
          certificateNum:this.certificateNum,
          state:this.state,
          startTime:this.certificateTime[0],
          endTime:this.certificateTime[1],
        }
      }).then(res =>{
        console.log(res) //返回Result对象  res中的data为Page对象
        this.tableData=res.data.records
        this.total=res.data.total
      })
    },
    //搜索重置
    reset(){
      this.name=""
      this.identity=""
      this.certificateNum=""
      this.state=""
      this.certificateTime=[]
      this.pageNum=1
      this.load()
    },
    //新增按钮
    handleAdd(){
      this.dialogFormVisible=true
      this.form={}
    },
    //批量删除按钮
    delBatch(){
      let ids=this.multipleSelection.map(v=>v.id)  //[ {},{},{}] => [1,2,3]
      this.loading=true
      this.request.post("/certificates/del/batch",ids).then(res=>{
        this.loading=false
        if(res.code==='200'){
          this.$message.success("批量删除成功")
          this.load()
        }else{
          this.$message.error("批量删除失败")
        }

      })
    },

    //  表格部分
    //表格多选事件
    handleSelectionChange(val){ // val = [{},{},{}]
      console.log(val)
      this.multipleSelection=val
    },
    //编辑行
    handleEdit(row){
      this.form=row
      this.dialogFormVisible=true
    },
    //删除行
    del(id){
      this.loading=true
      this.request.delete("/certificates/"+id).then(res=>{
        this.loading=false
        if(res.code==='200'){
          this.$message.success("删除成功")
          this.load()
        }else{
          this.$message.error("删除失败")
        }
      })
    },
    //分页插件
      //改变分页大小
    handleSizeChange(pageSize){
      console.log(pageSize)
      this.pageSize=pageSize;
      this.load()
    },
      //换页，直接点击页数 或 点击上一页下一页
    handleCurrentChange(pageNum){
      console.log(pageNum)
      this.pageNum=pageNum;
      this.load()
    },

    // 关闭新增或编辑对话框
    cancel(){
      this.dialogFormVisible=false
      this.load()  //重新加载是因为 由于双向数据绑定，在编辑的时候就已经改变的数据
    },
    //  新增或修改
    save(state){
      this.form.state=state;
      this.loading=true
      this.request.post("/certificates",this.form).then(res =>{
        this.loading=false
        if(res.code==='200'){
          this.$message.success("保存成功")
          this.dialogFormVisible=false
          this.load()
        }else{
          this.$message.error("保存失败")
          this.load()
        }
      })
    },
    load(){
      this.request.get("/certificates/page",{
        params:{
          pageNum:this.pageNum,
          pageSize:this.pageSize,

          name:this.name,
          identity:this.identity,
          certificateNum:this.certificateNum,
          state:this.state
        }
      }).then(res =>{
        console.log(res)
        this.tableData=res.data.records
        this.total=res.data.total
      })
    },
    //表头样式
    tableHeaderColor({row, column, rowIndex, columnIndex}) {
      return 'background-color:lightblue;color:#fff;font-size:15px;'
    },
    //表格日期格式化
    dateFormat(row,column,cellValue){
      return cellValue ? fecha.format(new Date(cellValue),'yyyy-MM-dd'):'';
    },
    //下载附件
    download(url){
      console.log(url)
      window.open(url)
    },
    cstate(state){
      if(state==='pass'){
        return '审核通过'
      }else if(state==='checking'){
        return '审核中'
      }else if(state==='nopass'){
        return '审核不通过'
      }
    }
  }

}
</script>

<style>
.el-dialog__body {
  padding: 2px 20px;
}
</style>